<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>信息列表</title>
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
	<!--web路径 不以/开始的相对的路径，找资源，以当前资源路径为基准，经常容易出问题  
	 以/开始的相对路径，找资源，衣服武器的路径为标准(http://localhost:3306) 需要加上项目名
	 			http://localhost:3306/Anime
	 -->
	 
 	<!-- Bootstrap -->
    <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${APP_PATH }/static/js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
    <!-- 图标字体引用 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet  prefetch">
	<link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet  prefetch">
    <!-- 图片样式css -->
    <link href="${APP_PATH }/static/Adhome/css/alpha.css" rel="stylesheet">

	<!-- 图片编辑js -->
	<script src="${APP_PATH}/static/Adhome/js/pic_modify.js" charset="utf-8"></script>
	<style type="text/css">
	.tWidth{
	width:15%;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	}
	</style>
</head>
<body>
<!-- Modal修改信息模态框 -->
<div class="modal fade" id="infoUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">信息修改</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
			  <div class="form-group">
			    <label for="info_update_title" class="col-sm-2 control-label">标题</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="info_update_title" name="infoTitle" placeholder="标题">
			      <span id="helpBlock1" class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label  class="col-sm-2 control-label">内容</label>
			    <div class="col-sm-10">
			      <textarea class="form-control" rows="3" id="info_update_content" name="infoContent" placeholder="内容，每段文字对应图片请用  - 分开"></textarea>
			      <span id="helpBlock2" class="help-block"></span>
			    </div>
			  </div>
			    <div class="form-group">
			    <label  class="col-sm-2 control-label">类别</label>
			    <div class="col-sm-4">
			      <!--  提交categoryId即可 -->
			      <select class="form-control" name="cateId" id="cate_update_select" >
				</select>
			    </div>
			  </div>
			   <div class="form-group">
			    <label for="info_title" class="col-sm-2 control-label">来源</label>
			    <div class="col-sm-4">
			      <input type="text" class="form-control" id="info_update_origin" name="infoOrigin" placeholder="来源">
			      <span id="helpBlock3" class="help-block"></span>
			    </div>
			  </div>
			     <div class="form-group">
			    <div class="col-sm-10 col-sm-offset-2">
			      <input type="hidden" class="form-control" id="deal_update_result">
			      <span id="helpBlock4" class="help-block"></span>
			    </div>
			  </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="info_update_btn" >更新</button>
      </div>
    </div>
  </div>
</div>


<!-- 修改图片模态框 -->
<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" id="picUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel" style="font-size: 18px;">资讯图片修改</h4>
      </div>
      <div class="modal-body"  style="padding-left:22px;height:400px;">
        <form class="form-horizontal" enctype="multipart/form-data" method="post">
        
			<div class="row" style="width:100%;" >
		     <div style="width: 50%; float: left; text-align: left;">
		     <label style="font-size:14px;color: blue;left: 2px;">(点击选择文件按钮选择上传修改标题图片)</label>
		     <input type="file" name="file" id="tpic_upload" style="display:inline;">            
		      </div>
		      <div style="width: 50%; float: left;text-align: left; position:relative;">  
		      <label style="font-size: 14px;color: red;">(点击选择文件按钮选择上传内容图片)</label>
		      <input type="file" multiple="multiple" name="files" id="pic_upload" style="display:inline;">  
		      <input type="checkbox" id="select_a" onclick="checkAll()" lay-skin="primary"  lay-filter="allChoose"  style="width:20px;height: 20px;padding-top: 10px; position: absolute;top:26%;right:20%;display:none;"><label  id= "state" style="font-size:14px; position:absolute;right:26% ;top:34%;display:none;">全选</label>
		      <button  type="button" onclick="showSelect()" id="edit"  class="layui-btn layui-btn-warm layui-btn-small" style="position: absolute;right:-4%;top:20%;" >编辑</button>
		      <input type="hidden" id="editer" value="编辑">
		      <button  type="button"  id="del"   class="layui-btn layui-btn-danger layui-btn-small" style="position: absolute;right:8%;top:20%;display:none;" >删除</button>
		      </div>
		      <div style="clear: both;"></div>
	      	<div style="margin-top:10px; width:100%; padding-left:16px; height:332px; ">
		         <ul id="bannerImg" style="list-style:none; height:332px; ">
			         <li style="float:left;" id="a0" del_tpid="" >
			         <div class="thinkcss" style= "width:120px;height:142px; position:relative; text-align:center;  border:1.2px solid #d0d0d0; background:url(${APP_PATH}/static/Adhome/img/default.jpg); background-size:120px 120px;background-repeat:no-repeat">
			         <!-- <img style="height: 120px;width: 120px;" alt="标题图片" src="http://localhost:8080/Anime-sky/upload/imgs/1525539670464_940.jpg"> -->
				         <div class="thinkcss2" style="width:120px;height:120px; position: absolute; top:0%;left:0%;">
			      			<span><i class="fa fa-trash-o" aria-hidden="true"></i></span>     
	            			 <a href="javascript:void(0)" onclick="delespan(0)" class="now">&nbsp;</a>
			    		</div>
			    		<a href='#' style="position: absolute;bottom: 0px; left:26%;color:#4B125F" onclick='delespan(0)'>标题图片</a>
			    		<input style="position: absolute;display:none; right: 0px; bottom:0px;width:16px; height:16px" value="1" type="checkbox"  name="pic_check0" lay-skin="primary">
			         </div>
			         </li>                               
		        </ul>
	        </div>                                         
 		 </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" style="text-decoration:none;">关闭</button><button type="button" class="btn btn-primary" id="pic_update_btn" >保存</button>
      </div>
    </div>
  </div>
</div>


<!-- Modal添加信息模态框 -->
<div class="modal fade" id="infoAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">信息添加</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
			  <div class="form-group">
			    <label for="info_title" class="col-sm-2 control-label">标题</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="info_title" name="infoTitle" placeholder="标题">
			      <span id="helpBlock1" class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label  class="col-sm-2 control-label">内容</label>
			    <div class="col-sm-10">
			      <textarea class="form-control" rows="3" id="info_content" name="infoContent" placeholder="内容，每段文字对应图片请用  - 分开"></textarea>
			      <span id="helpBlock2" class="help-block"></span>
			    </div>
			  </div>
			    <div class="form-group">
			    <label  class="col-sm-2 control-label">类别</label>
			    <div class="col-sm-4">
			      <!--  提交categoryId即可 -->
			      <select class="form-control" name="cateId" id="cate_add_select" >
				</select>
			    </div>
			  </div>
			   <div class="form-group">
			    <label for="info_title" class="col-sm-2 control-label">来源</label>
			    <div class="col-sm-4">
			      <input type="text" class="form-control" id="info_origin" name="infoOrigin" placeholder="来源">
			      <span id="helpBlock3" class="help-block"></span>
			    </div>
			  </div>
			     <div class="form-group">
			    <div class="col-sm-10 col-sm-offset-2">
			      <input type="hidden" class="form-control" id="deal_result">
			      <span id="helpBlock4" class="help-block"></span>
			    </div>
			  </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="info_save_btn" >保存</button>
      </div>
    </div>
  </div>
</div>
    
		    <nav class="navbar navbar-inverse" role="navigation">
			<div class="container-fluid">
		    <div class="navbar-header">
		        <a class="navbar-brand" href="#">AnimeSky</a>
		    </div>
		    <div>
		        <ul class="nav navbar-nav">
		            <li class="active"><a href="#">Home</a></li>
		            <li><a href="#"></a></li>
		        </ul>
		    </div>
		     <div style="float: right;margin-right: 32px;">
		     <ul class="nav navbar-nav">
	     		    <li class="dropdown" style="right: 6px;">
	                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
	                  	  我<b class="caret"></b>
	                </a>
	                <ul class="dropdown-menu">
	                    <li><a href="#">一级管理</a></li>
	                    <li><a href="#">二级管理</a></li>
	                    <li><a href="#">三级管理</a></li>
	                    <li class="divider"></li>
	                    <li><a href="#">四级管理</a></li>
	                    <li class="divider"></li>
	                    <li><a href="#">退出</a></li>
	                </ul>
	               </li>
	            </ul>
		     </div>
			</div>
		</nav>
 
	<!-- 搭建显示页面 -->
	<div class="container">
	<!-- 按钮 -->
	<div class="row">
		  <div class="col-md-4 col-md-offset-8">
		  	<button type="button" class="btn btn-primary" id="info_add_model_btn">新增</button>
		  	<button type="button" class="btn btn-danger" id="info_delete_all_btn">删除</button>
  		  </div>
	</div>
	<!-- 显示表格数据-->
	<div class="row">
		<div class="col-md-12">
			<table class="table table-striped table-bordered table table-hover"
			id="info_table">
				<thead>
				<tr>
				    <th data-class="tWidth">
				     <label>
					    <input type="checkbox" value="" id="check_all" style="height:10px;width: 10px;">
					            全选
					  </label>
				    </th>
					<th data-class="tWidth">#</th>
					<th data-class="tWidth">信息标题</th>
					<th data-class="tWidth"> 内容</th>
					<th data-class="tWidth">类别</th>
					<th data-class="tWidth">浏览</th>
					<th data-class="tWidth">评论</th>
					<th data-class="tWidth">作者</th>
					<th data-class="tWidth">来源</th>
					<th data-class="tWidth">日期</th>
					<th data-class="tWidth">操作</th>
				</tr >
				</thead>
				<tbody>
				
				</tbody>
				
			</table>
		</div>
	</div>
	<!-- 显示分页信息 -->
	<div class="row" >
	<!-- 分页信息 -->
	<div class="col-md-6" id="page_info_area">
		
	</div>
	<!-- 分页条 -->
	<div class="col-md-6" id="page_nav_area">
		
	</div>

	</div>

		
	</div>
	<script type="text/javascript">
		var totalRecord; //总记录数
		var currentPage;
		//1、页面加载完成以后，直接去发送ajax请求要到分页数据
		$(function(){
			//去首页
			to_page(1);
		}); 
		
		function to_page(pn){
				$.ajax({
					url:"${APP_PATH}/info",
					data:"pn="+pn,
					type:"GET",
					success:function(result){
						//console.log(result);
						//1、解析并显示信息数据
						build_info_table(result);
						//2、解析并显示分页信息
					    build_page_info(result);
					    build_page_nav(result);
					}
					
				});
		}
		
		 //转换日期格式       
		function changeDateFormat(cellval) {           
		        if (cellval!=null) {               
		        // var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));     
		         var date = new Date(cellval);
		         var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;               
		         var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();   
		         var year = date.getFullYear();
		         var hour = date.getHours < 10 ? "0" + date.getHours() : date.getHours();
		         var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
		         var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
		         return year + "-" + month + "-" + currentDate + " " + hour + ":" + minute + ":" + second;
		  
		         }  
		 }
		 
		function build_info_table(result){
			//执行前清空页面信息
			$("#info_table tbody").empty();
			
			var infos = result.extend.pageInfo.list;
			var pagenums=result.extend.pageInfo.pageNum;
			//JQuery带的for循环
			$.each(infos, function(index,item) {
				//alert(item.infoTitle);
				var checkBox = $("<td><input type='checkbox' class='check_item'/></td>")
				var numth =$("<td></td>").append((pagenums-1)*5+index+1);
				var infoTitle = $("<td></td>").append(item.infoTitle);
				var infoContent = $("<td></td>").append(item.infoContent);
				var cateName = $("<td></td>").append(item.category.cateName);
				var infoBnum = $("<td></td>").append(item.infoBnum);
				var infoCnum = $("<td></td>").append(item.infoCnum);
				var adName = $("<td></td>").append(item.admin.adName);
				var infoOrigin = $("<td></td>").append(item.infoOrigin);
				//格式化时间类型
				var date1 = changeDateFormat(item.infoDate);
				var infoDate = $("<td></td>").append(date1);
				/*
				<button type="button" class="btn btn-primary" aria-label="Left Align">
  						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
						</button>
						<button type="button" class="btn btn-danger" aria-label="Left Align">
  						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
						</button>
				*/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
				.attr("aria-label","Left Align").append($("<span style='right:2px;'></span>").addClass("glyphicon glyphicon-pencil")
						.attr("aria-hidden","true")).append("编辑");
				//为编辑按钮添加一个自定义的属性便于修改
					editBtn.attr("edit_id",item.infoId);
				//图片管理
				var editPic = $("<button></button>").addClass("btn btn-success btn-sm pic_btn")
				.attr("aria-label","Left Align").append($("<span style='right:2px;'></span>").addClass("glyphicon glyphicon-picture")
						.attr("aria-hidden","true")).append("图片");
				//为图片管理添加一个自定义属性保存id便于修改
					editPic.attr("pic_id",item.infoId);
				
				var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
				.attr("aria-label","Left Align").append($("<span style='right:2px;'></span>").addClass("glyphicon glyphicon-trash")
						.attr("aria-hidden","true")).append("删除");
				//为删除按钮添加一个自定义属性便于删除
					delBtn.attr("del_id",item.infoId);
				var btn = $("<td></td>").append(editBtn).append(" ").append(editPic).append(" ").append(delBtn);
				//append方法执行完以后 仍返回之前的元素
				$("<tr></tr>").append(checkBox)
				.append(numth)
				.append(infoTitle)
				.append(infoContent)
				.append(cateName)
				.append(infoBnum)
				.append(infoCnum)
				.append(adName)
				.append(infoOrigin)
				.append(infoDate)
				.append(btn)
				.appendTo("#info_table tbody");
			});
			
		}
		
		function build_page_info(result){
			//清除记录信息
			$("#page_info_area").empty();
			$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页"+",总共"+
					result.extend.pageInfo.pages+"页,"+"总共"+result.extend.pageInfo.total+"记录");
			        totalRecord = result.extend.pageInfo.total;
			        currentPage = result.extend.pageInfo.pageNum;
		}
		function build_page_nav(result){
			//清除分页条
			$("#page_nav_area").empty();
			
			var ul =$("<ul></ul>").addClass("pagination");
			//构建元素
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if (result.extend.pageInfo.hasPreviousPage == false) {
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页事件
				firstPageLi.click(function () {
					to_page(1);
				});
				prePageLi.click(function () {
					to_page(result.extend.pageInfo.pageNum-1);
				});
			}
			
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if (result.extend.pageInfo.hasNextPage == false) {
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页事件
				nextPageLi.click(function () {
					to_page(result.extend.pageInfo.pageNum+1);
				});
				lastPageLi.click(function () {
					to_page(result.extend.pageInfo.pages);
				});
			}
			
			//添加首页和前一页 的提示 
			ul.append(firstPageLi).append(prePageLi);
			//遍历 页码 1， 2， 3...添加到ul中
			$.each(result.extend.pageInfo.navigatepageNums,function(index, item){
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			ul.append(nextPageLi).append(lastPageLi);
			
			//把ul 添加到nav
			var navEle = $("<nav></nav>").addClass("Page navigation")
			.append(ul).appendTo("#page_nav_area");
		}
		
		function reset_form(ele){
			//JQuery 没有reset()方法，[0]变为dom对象
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			$(ele).find(".help-block").text("");
		}
		//新增按钮绑定事件 弹出模态框
		 addModel();
		 function addModel(){
				$("#info_add_model_btn").click(function () {
					reset_form("#infoAddModal form");
					//清除重新点击中 提示的错误信息
					//$("#infoAddModal .help-block").empty();
					//弹出之前清除表单数据(表单重置)
					//JQuery 没有reset()方法，[0]变为dom对象
					//$("#infoAddModal form")[0].reset();
					//发送ajax请求, 查出分类, 显示在下拉列表中
					getInfoCategory("#infoAddModal select");
					//弹出模态框
					$("#infoAddModal").modal({
						backdrop:"static"
					});
				});
		 }
		
		//查出所有的分类并显示在下拉列表中
		function getInfoCategory(ele){
			$(ele).empty();
			$.ajax({
				url:"${APP_PATH}/category",
				type:"Get",
				success:function(result){
					//console.log(result);
				//{"code":520,"msg":"处理成功！","extend":{"cates":[{"cateId":1,"cateName":"动画"},{"cateId":2,"cateName":"音乐"},{"cateId":3,"cateName":"游戏"}]}}
					//只有一个select 所以可以这样写
					//$("#infoAddModal select").append("");
					//遍历分类信息
					$.each(result.extend.cates,function(){
						var optionEle = $("<option></option>").append(this.cateName).attr("value",this.cateId);
						optionEle.appendTo(ele);
					});
				}
			});
		
		}
		  //校验表单数据
		  function validate_add_form(){
			  //1.拿到要校验的数据，使用正则表达式
			  var infoTitle = $("#info_title").val();
			  var checkTitle =/^[\s\S]{1,60}$/;
			  if(!checkTitle.test(infoTitle)){
				  show_validate_msg("#info_title","error","标题长度在1-60位之间");
				  return false;
			  }else{
				  show_validate_msg("#info_title","success","");
			  }
			  //校验内容
			 var infoContent = $("#info_content").val();
			 var checkContent =/^[\S\s]{1,20000}$/;
			 if(!checkContent.test(infoContent)){
				 show_validate_msg("#info_content","error","内容长度在1-20000之间");
				 return false;
			 }else{
				 show_validate_msg("#info_content","success","");
			 }
			 var origin = $("#info_origin").val();
			 var chekOrigin = /^\s*$/g;
			 if (chekOrigin.test(origin) || origin == "") {
				 show_validate_msg("#info_origin","error","请输入来源！");
				 return false;
			}else{
				show_validate_msg("#info_origin","success","");
			}
			 return true;
			  
		  }
		  //显示校验结果的提示信息
		  function show_validate_msg(ele,status,msg){
			  //清除当前元素校验状态
			  $(ele).parent().removeClass("has-error has-success");
			  $(ele).next("span").text("");
			  if(status == "success"){
				  $(ele).parent().addClass("has-success");
				  $(ele).next("span").text(msg);
			  }else if(status == "error"){
				  $(ele).parent().addClass("has-error");
				  $(ele).next("span").text(msg);
			  }
			  
		  }
		  delFunction();
		  function delFunction(){
			  //当输入框内容发生改变的时候触发时间
			  $("#info_title").change(function(){
				  //发送ajax 请求验证用户名是否可用
				  var infoTitle = this.value;
				  $.ajax({
					  url:"${APP_PATH}/checkInfoTitle",
					  type:"POST",
					  data:"infoTitle="+infoTitle,
					  success: function(result){
						  if(result.code == 520){
							  show_validate_msg("#info_title","success","标题名可用！");
							  //如果ajax请求值可用添加保存按钮自定义属性ajax_val
							  $("#info_save_btn").attr("ajax_val","success");
						  }else{
							  show_validate_msg("#info_title","error",result.extend.regx_msg);
							  $("#info_save_btn").attr("ajax_val","error");
						  }
					  }
				  });
			  });
			  
			  
			//新增并保存信息的方法	
				 $("#info_save_btn").click(function(){
					 //1.模态框中填写的表单数据提交给服务器进行保存
					 
					 //判断之前的ajaxinfoTitle是否成功，如果成功
					  if($(this).attr("ajax_val")=="error"){
						  return false;
					  }
					 //先对提交给服务器的数据进行校验
					 validate_add_form();
					 if(!validate_add_form()){
						 //show_validate_msg("#deal_result","error","请检验数据合法性！");
						 return false;
					 } 
					
					 //2.发送ajax请求保存信息
					$.ajax({
						 url:"${APP_PATH}/info",
						 type:"POST",
						 data:$("#infoAddModal form").serialize(),
						 success:function(result){
							 if (result.code == 520) {
								//alert(result.msg);
								 //信息保存成功
								 //1.关闭模态框
								  $("#infoAddModal").modal('hide');
								 //2.来到最后一页，显示刚才的数据  pagehelper 查询的页数大于最后一页时总是显示最后
								  // 一页数据，总记录数肯定大于总页数
								  to_page(totalRecord);
							}else{
								//显示失败信息 后端验证
								//有那个字段的错误信息就显示那个字段的
								if (undefined != result.extend.errorFields.infoTitle) {
									//显示标题错误信息
									show_validate_msg("#info_title","error",result.extend.errorFields.infoTitle);
								}
								if (undefined != result.extend.errorFields.infoContent) {
									//显示内容错误信息
									show_validate_msg("#info_content","error",result.extend.errorFields.infoContent);
								}
								if (undefined != result.extend.errorFields.infoOrigin) {
									//显示来源错误信息
									show_validate_msg("#info_origin","error",result.extend.errorFields.infoOrigin);
								}
								
							}
							 
							 
							
						 }
					 });
				 });
		  }
		   
		   function validate_update_form(){
					  //更新之前进行表单数据验证
					//1.拿到要校验的数据，使用正则表达式
					  var infoTitle = $("#info_update_title").val();
					  var checkTitle =/^[\s\S]{1,60}$/;
					  if(!checkTitle.test(infoTitle)){
						  show_validate_msg("#info_update_title","error","标题长度在1-60位之间");
						  return false;
					  }else{
						  show_validate_msg("#info_update_title","success","");
					  }
					  //校验内容
					 var infoContent = $("#info_update_content").val();
					 var checkContent =/^[\s\S]{1,20000}$/;
					 if(!checkContent.test(infoContent)){
						 show_validate_msg("#info_update_content","error","内容长度在1-20000之间");
						 return false;
					 }else{
						 show_validate_msg("#info_update_content","success","");
					 }
					 var origin = $("#info_update_origin").val();
					 var chekOrigin = /^\s*$/g;
					 if (chekOrigin.test(origin) || origin == "") {
						 show_validate_msg("#info_update_origin","error","请输入来源！");
						 return false;
					}else{
						show_validate_msg("#info_update_origin","success","");
					}
					 return true;
				  }
		   UpdateModle();
		  function UpdateModle(){
			  //1.我们是按钮创建之前就绑定了click,所以绑定不上
			  //解决1)、可以在创建按钮的时候就绑定click
			  //解决2)、绑定.live()
			  //JQury中没有live,使用on进行替代
			  /* $(".edit_btn").click(function(){
				  alert("edit");
			  }); */
			  
			  $(document).on("click", ".edit_btn", function(){
				  //清除表单原有信息以及提示的错误信息
				  reset_form("#infoUpdateModal form");
				//1.发送ajax请求, 查出分类, 显示在下拉列表中
				  getInfoCategory("#infoUpdateModal select")
				//2.查出信息内容显示在修改框
				getInfoById($(this).attr("edit_id"));
				
				//3.把信息的id传递给模态框的更新按钮
					$("#info_update_btn").attr("edit_id", $(this).attr("edit_id"));
				   //弹出模态框
					$("#infoUpdateModal").modal({
						backdrop:"static"
					});
				  
			  });
			  
			  //当输入框内容发生改变的时候触发时间
			  $("#info_update_title").change(function(){
				  //发送ajax 请求验证用户名是否可用
				  var infoTitle = this.value;
				  $.ajax({
					  url:"${APP_PATH}/checkInfoTitle",
					  type:"POST",
					  data:"infoTitle="+infoTitle,
					  success: function(result){
						  if(result.code == 520){
							  show_validate_msg("#info_update_title","success","标题名可用！");
							  //如果ajax请求值可用添加保存按钮自定义属性ajax_val
							  $("#info_update_btn").attr("ajax_val","success");
						  }else{
							  show_validate_msg("#info_update_title","error",result.extend.regx_msg);
							  $("#info_update_btn").attr("ajax_val","error");
						  }
					  }
				  });
			  });
			  
			//新增并保存更新信息的方法	
				 $("#info_update_btn").click(function(){
					 //1.模态框中填写的表单数据提交给服务器进行保存
					 
					 //判断之前的ajaxinfoTitle是否成功，如果成功
					  if($(this).attr("ajax_val")=="error"){
						  return false;
					  }
					 //先对提交给服务器的数据进行校验
					 validate_update_form();
					 if(!validate_update_form()){
						 //show_validate_msg("#deal_update_result","error","请检验数据合法性！");
						 return false;
					 } 
					
					
					 //2.发送ajax请求保存更新的信息
					$.ajax({
						 url:"${APP_PATH}/info/"+$(this).attr("edit_id"),
						// type:"POST",
						//data:$("#infoUpdateModal form").serialize()+"&_method=PUT",  //由与是PUT请求所以比较特殊
						//上面两句是不用PUT请求的方法
						//下面使用PUT请求需要配置过滤器
						type:"PUT",
						data:$("#infoUpdateModal form").serialize(),
						success:function(result){
							 if (result.code == 520) {
								//alert(result.msg);
								 //信息保存成功
								 //1.关闭模态框
								  $("#infoUpdateModal").modal('hide');
								 //2.来到最后一页，显示刚才的数据  pagehelper 查询的页数大于最后一页时总是显示最后
								  //跳到修改的当前页
								  to_page(currentPage);
							}else{
								//显示失败信息 后端验证
								//有那个字段的错误信息就显示那个字段的
								if (undefined != result.extend.errorFields.infoTitle) {
									//显示标题错误信息
									show_validate_msg("#info_update_title","error",result.extend.errorFields.infoTitle);
								}
								if (undefined != result.extend.errorFields.infoContent) {
									//显示内容错误信息
									show_validate_msg("#info_update_content","error",result.extend.errorFields.infoContent);
								}
								if (undefined != result.extend.errorFields.infoOrigin) {
									//显示来源错误信息
									show_validate_msg("#info_update_origin","error",result.extend.errorFields.infoOrigin);
								}
								
							}
							 
							 
							
						 }
					 });
				 });
			  
		  }
		  function getInfoById(id){
			  $.ajax({
				  url:"${APP_PATH}/info/"+id,
				  type:"GET",
				  success: function(result){
					  //console.log(result);
					  var infoData = result.extend.info;
					  $("#info_update_title").val(infoData.infoTitle);
					  $("#info_update_content").val(infoData.infoContent);
					  $("#infoUpdateModal select").val([infoData.cateId]);
					  $("#info_update_origin").val(infoData.infoOrigin);
				  }
				  
			  });
		  }
		  
		  deleteById();
		  function deleteById(){
			  //document是在整个文档范围内查找
			  $(document).on("click",".delete_btn",function(){
				 //1.弹出是否删除对话框
				 //找到父节点的tr标签,并找到该标签下的第二个td标签
				 var infoTitle = $(this).parents("tr").find("td:eq(2)").text();
				 var infoId= $(this).attr("del_id");
				 //alert($(this).parents("tr").find("td:eq(2)").text());
				 if (confirm("确认删除【"+infoTitle+"】吗？")) {
					$.ajax({
						url:"${APP_PATH}/info/"+infoId,
						type:"DELETE",
						success:function(result){
							alert(result.msg);
							//回到本页
							to_page(currentPage);
						}
					});
				}
			  });
			  
			  //完成全选全不选
			  $("#check_all").click(function(){
				 //attr获取checked是undefined;
				 //alert($(this).attr("checked"));
				  //我们这些dom原生的属性;attr获取自定义属性的值
				  //原生用
				  //alert($(this).prop("checked"));
				  $(this).prop("checked"); //选中返回ture 没选中为false
				  $(".check_item").prop("checked",$(this).prop("checked"));
			  });
			  
			  //check_item
			  $(document).on("click",".check_item",function(){
				  //判断当前选择的元素是否5个
				  var flag = $(".check_item:checked").length==$(".check_item").length;
				  $("#check_all").prop("checked",flag);
			  });
			  
			  //点击全部删除，就批量删除
			  $("#info_delete_all_btn").click(function(){
				  //
				  var infoTitle = "";
				  var del_idstr = "";
				  $.each($(".check_item:checked"),function(){
					  //this
					  infoTitle += $(this).parents("tr").find("td:eq(2)").text()+",";
					  //组装信息id字符串
					  del_idstr += $(this).parents("tr").find("button:eq(0)").attr("edit_id")+"-";
					  
				  });
				  //去除infoTitle多余的,
				  infoTitle = infoTitle.substring(0,infoTitle.length-1);
				  //去除del_idstr的多余-
				  del_idstr = del_idstr.substring(0,del_idstr.length-1);
				  
				  if (confirm("确认删除【"+infoTitle+"】吗？")) {
					//发送ajax请求
					$.ajax({
						url:"${APP_PATH}/info/"+del_idstr,
						type:"DELETE",
						success:function(result){
							alert(result.msg);
							//回到当前页面
							to_page(currentPage);
						}
					});
				}
			  });
		  }
		  
	   
		 //上传图片js
		   $("#pic_upload").change(function(){     //用于进行图片上传，返回地址
	              var f=$("#pic_upload").val();
	              if(f == null || f ==undefined || f == ''){
	                  return false;
	              }
	              if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
	              {
	                  alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
	                  $("#pic_upload").val('');
	                  return false;
	              }
	              var formData = new FormData();
	              $.each($("#pic_upload")[0].files,function(i,file){
	            	  formData.append('files', file);
	            	  alert("文件属性"+file);
	              });
	              var pic_id = $("#pic_update_btn").attr("pic_id");
	             formData.append('id', pic_id);
	              $.ajax({
	                  type: "POST",
	                  url: "http://localhost:8080/Anime-sky/uploadImg",
	                  data: formData,
	                  cache: false,
	                  contentType: false,    //不可缺 避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
	                  processData: false,    //不可缺 默认为true。默认情况下，发送的数据将被转换为对象
	                  dataType:"json",
	                  success: function(result) {
	                      if(result.code== 520){                        
	                          var id = $('#bannerImg li:last').attr('id');
	                           id = id.substr(1);
	                           id = parseInt(id) + 1;
	                           alert("返回值成功");
	                           $.each(result.extend.pics, function(index,item) {
	                        	   id = id + index;
	                        	   var ids=id;
	                               rid = 'a'+id; 
	                               alert("上传成功"+item.picUrl);
	                               //拼接删除按钮                                                
	                           var a_hidden="<li class='picDel' style= 'float:left; margin-left:6px;'id='"+ rid +"' del_pid='"+item.picId+"'><div class='thinkcss' style= 'width:120px;height:142px; position:relative; text-align:center;  border:1.2px solid #d0d0d0; background:url("+item.picUrl+"); background-size:120px 120px;background-repeat:no-repeat'>";
	                           var dele_html="<div class='thinkcss2' style='width:120px;height:120px; position:absolute; top:0%;left:0%;'><span><i class='fa fa-trash-o' aria-hidden='true'></i></span> <a href='javascript:void(0)' onclick='delespan("+ids+")' class='now'>&nbsp;</a></div>";
	                           var a_html="<a href='#' style='position: absolute;bottom: 0px; left:26%;color:#4B125F' onclick='delespan("+ids+")'>内容图片</a> <input style='position: absolute;display:none; right: 0px; bottom:0px;width:16px; height:16px' value='1' type='checkbox'  name='pic_check' lay-skin='primary'>";
	                           var li_html="</div></li>";
	                           $('#bannerImg').append(a_hidden+dele_html+a_html+li_html); 
	                           });
	                      }else{
	                          alert("上传失败");
	                      }
	                  },
	                  error: function(XMLHttpRequest, textStatus, errorThrown) {
	                      alert("上传失败，请检查网络后重试");
	                  }
	              });
	       });  
	     //删除图片js：
	     //本地上传的图片删除，去掉图片的id即可
	         function delespan(id){
	    	     if(confirm("确定要删除该图片么？")){
	    	    	 //删除标题图片
	    	    	 if(id == 0){
		    	    	 var delId = $("#a"+id).attr("del_tpid");
		    	    	 $.ajax({
		    	    		 url:"http://localhost:8080/Anime-sky/delTpic/"+delId, //最后有斜杠
		    	    		 type:"DElETE",
		    	    		 success:function(result){
		    	    			 alert(result.extend.msg);
		    	    		 }
		    	    	 });
	    	    		$('#a'+id).children().css({'background':'url("${APP_PATH}/static/Adhome/img/default.jpg")',"background-size":"120px 120px","background-repeat":"no-repeat"} );
	    	    		alert("js删除成功");
	    	    	 }else{
	    	    		 var delId = $("#a"+id).attr("del_pid");
		    	    	 $.ajax({
		    	    		 url:"http://localhost:8080/Anime-sky/delPic/"+delId, //最后右斜杠
		    	    		 type:"DElETE",
		    	    		 success:function(result){
		    	    			 alert(result.extend.msg);
		    	    		 }
		    	    	 });
	    	    		 $('#a'+id).remove();
	    	    		 alert("js删除成功");
	    	    	 } 
	               
	    	     }
	            }
		
	</script>
</body>
</html>